<template>
  <div class="heard">
    <el-tabs v-model="listParams.type" @tab-click="handleClick">
      <el-tab-pane label="合作伙伴" name="1"></el-tab-pane>
      <el-tab-pane label="四大理由" name="2"></el-tab-pane>
      <el-tab-pane label="流程监控" name="3"></el-tab-pane>
      <el-tab-pane label="无忧服务" name="4"></el-tab-pane>
      <el-tab-pane label="入驻引导" name="5"></el-tab-pane>
      <el-tab-pane label="教师团队" name="6"></el-tab-pane>
      <el-tab-pane label="咨询老师，工作年限" name="7"></el-tab-pane>
      <el-tab-pane label="服务优势" name="8"></el-tab-pane>
      <el-tab-pane label="认证流程" name="9"></el-tab-pane>
      <el-tab-pane label="认证作用" name="10"></el-tab-pane>
      <el-tab-pane label="电话" name="11"></el-tab-pane>
      <el-tab-pane label="认证周期" name="12"></el-tab-pane>
      <el-tab-pane label="所需新材料" name="13"></el-tab-pane>
      <el-tab-pane label="规则协议" name="14"></el-tab-pane>
      <el-tab-pane label="友情链接" name="15"></el-tab-pane>
      <el-tab-pane label="联系方式" name="16"></el-tab-pane>
    </el-tabs>
    <!-- list -->
     <el-button
          type="primary"
          size="small"
          icon="el-icon-edit"
          @click="handleEdit2"
          v-if="listParams.type == 7 || listParams.type == 15"
          >新增</el-button
        >
    <div >
      <!-- <span>{{listParams.type}}</span> -->
      <el-form>
        <el-form-item v-if="listParams.type != 7 && listParams.type != 11 && listParams.type !=13&& listParams.type !=12 && listParams.type !=14&& listParams.type !=15&& listParams.type !=16" label="模块标题">
          <el-input v-model="formT.title"></el-input>
        </el-form-item>
        <el-form-item v-if="listParams.type == 3||listParams.type == 4" label="副标题">
          <el-input v-model="formT.introduce"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center;margin:10px">
        <el-button size="small" @click="saveT" type="warning" v-if="listParams.type != 7 && listParams.type != 11&& listParams.type != 13&& listParams.type != 12&& listParams.type != 14&& listParams.type != 15&& listParams.type !=16" >保存</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        v-if="listParams.type != 5 || listParams.type != 6"
      >
        <el-table-column
          prop="title"
          label="标题"
          align="center"
          min-width="150"
          v-if="listParams.type != 7 "
        ></el-table-column>
        <!-- <el-table-column
          v-if="listParams.type = '10'"
          prop="content"
          label="名称"
          align="center"
          min-width="150"
        ></el-table-column> -->
        <el-table-column
          prop="introduce"
          label="介绍"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="操作"
          min-width="230"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="handleEdit1(scope.row)"
              v-if="listParams.type == 7||listParams.type == 15"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
       <!-- 编辑 -->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form label-width="60px" :model="form">
          <el-form-item label="图片"  v-if="listParams.type != 9&&listParams.type != 11 && listParams.type != 12 &&listParams.type != 13 && listParams.type != 14&& listParams.type != 15&& listParams.type !=16">
            <el-upload
              :headers="headers"
              :action="`${baseUrl}/mba/course/upload`"
              :show-file-list="false"
              :on-success="uploadLogoPicUrl"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif"
            >
              <img
                v-if="form.logo"
                :src="showUrl + form.logo"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="标题" v-if="listParams.type != 7">
            <el-input v-model='form.title'></el-input>
          </el-form-item>
          <el-form-item label="内容"  v-if="listParams.type != 12 && listParams.type != 13&& listParams.type != 14">
            <el-input type="textarea" autosize v-model="form.introduce"></el-input>
          </el-form-item>
          <el-form-item label="内容"  v-if="listParams.type == 12 || listParams.type == 13||listParams.type == 14">
            <Editor v-model="form.introduce" />
          </el-form-item>
           <el-form-item label="排序"  v-if='listParams.type != 11 && listParams.type != 12 && listParams.type != 13&& listParams.type != 14'>
            <el-input type="textarea" autosize v-model="form.sort"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="save()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增 -->
      <el-dialog title="新增" :visible.sync="dialogFormVisible1">
        <el-form label-width="60px" :model="form">
          <el-form-item label="图片"  v-if="listParams.type != 9 && listParams.type !=15">
            <el-upload
              :headers="headers"
              :action="`${baseUrl}/mba/course/upload`"
              :show-file-list="false"
              :on-success="uploadLogoPicUrl1"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif"
            >
              <img
                v-if="form.logo"
                :src="showUrl + form.logo"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="标题" v-if="listParams.type != 7">
            <el-input type="textarea" autosize v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input type="textarea" autosize v-model="form.introduce"></el-input>
          </el-form-item>
         <el-form-item label="排序">
            <el-input type="textarea" autosize v-model="form.sort"></el-input>
          </el-form-item>
          <el-form-item>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button size="small" type="primary" @click="save1()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getList1 ,edit1 ,delBanner ,delBanner1} from '@/api/web/change'
import { getToken } from "@/utils/auth";
import Editor from "@/components/Editor";
export default {
   components: { Editor },
  data() {
    return{
      headers: { Authorization: "Bearer " + getToken() },
      baseUrl: process.env.VUE_APP_BASE_API,
      // 标签页
      listParams:{
        type:'1',
        status:2
      },
      // 加载
      loading:false,
      // 标题表单
      formT:{
        id:'',
        title:''
      },
      // list编辑
      form:{
        content: "",
        id: "",
        introduce: "",
        title:"",// 标题字段
        logo: "",
        status: "",
        subtitle: "",
        title: "",
        type: "",
        video: "",
      },
      // list列表
      tableData:[],
      dialogFormVisible:false,
      dialogFormVisible1:false
    }
  },
  created(){
    this.getTitle()
    this.getList()
  },
  methods:{
    // 选择
    handleClick(tab) {
      this.getTitle()
      this.getList()
    },
    // 打开编辑
    handleEdit(row) {
      this.form = row
      this.dialogFormVisible = true
    },
    // 上传图片
    uploadLogoPicUrl(res) {
      this.form.logo = res.data;
    },
     uploadLogoPicUrl1(res ,file) {
      this.form.logo = res.data;
      if(res.code ==200){
        this.$message.success('上传成功')
        this.form.logo = res.data
        
      }else{
        this.$message.success('上传失败')
      }
    },
    // 上传视频
    uploadLogoPicUrlV(res) {
      this.form.video = res.data;
    },
    handleEdit2(){
      this.dialogFormVisible1 = true
      this.form ={}
    },
    // 删除
    handleEdit1(row){
      console.log(row.id)
      const id = row.id;
      console.log(id);
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delBanner(id);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
    // 保存
    saveT() {
      edit1(this.formT).then(res => {
        if(res.code == 200){ 
          this.$message.success('保存成功')
          this.getTitle()
        }
      })
    },
    // 保存list
    save() {
      edit1(this.form).then(res => {
        if(res.code == 200){ 
          this.$message.success('保存成功')
          this.dialogFormVisible = false
          this.getList()
        }
      })
    },
    save1() {
      let data = {
        content: this.form.content,
        introduce: this.form.introduce,
        logo: this.form.logo,
        title:this.form.title,// 标题字段
        status: 2,
        subtitle: this.form.subtitle,
        title: this.form.title,
        sort:this.form.sort,
        type:this.listParams.type,
      }
      delBanner1(data).then(res => {
        if(res.code == 200){ 
          this.$message.success('新增成功')
          this.dialogFormVisible1 = false
          this.getList()
        }
      })
    },
    // 获取标题
    getTitle() {
      let data = {
        type :this.listParams.type,
        status:1
      }
      getList1(data).then(res => {
        console.log(res,'获取标题')
        if(res.code == 200){
          this.formT = res.rows[0]
        }
      })
    },
    // list请求
    getList() {
      getList1(this.listParams).then(res => {
        console.log(res,'axaxax')
        if(res.code == 200){
          this.tableData = res.rows
        }
      })
    },
  }
}
</script>

<style >
  .heard{
    padding: 20px 20px 40px 20px;
  }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }
</style>